<template>
    <div class="demo-collapse">
        <el-button style="margin-bottom: 20px;" type="primary" plain icon="plus" @click="handleAddSchool">新建学校</el-button>
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="中国地质大学" name="1">
                <div style="margin-bottom: 20px;">
                    <el-button type="primary" link icon="plus" @click="handleDetail">新增项目</el-button>
                    <el-button type="primary" link icon="edit" @click="handleAddSchool('edit')">修改学校</el-button>
                    <el-button type="primary" link icon="delete">删除学校</el-button>
                </div>
                <tableList :table-data="tableData" :table-header="tableHeader" :tabel-options="tableOptions"
                    :tabelHeight="'200px'"></tableList>
            </el-collapse-item>
        </el-collapse>
    </div>
    <el-dialog v-model="visible" title="新建学校" draggable :width="mobile ? '90%' : '30%'" :before-close="handleClose">
        <el-form :model="schoolForm" ref="schoolFormRef" :rules="schoolFormRules">
            <el-form-item label="学校名称" prop="xiaoming">
                <el-input v-model="schoolForm.xiaoming"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" plain @click="handleSubmit">提交</el-button>
                <el-button @click="handleClose">返回</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
let visible = ref(false)
import tableList from '@/components/tableList/tableList.vue';
import { useDevice } from '@/hooks/web/useDevice';
import { ElMessage, ElMessageBox } from 'element-plus';
const { mobile } = useDevice()
const activeName = ref('1')
const tableData = ref([
    {
        name: '测试'
    }
])

const schoolFormRules = {
    xiaoming: [{ required: true, message: '请输入学校名称', trigger: 'blur' }]
}

const schoolForm = reactive({
    xiaoming: '',
    id: '',
})

const schoolFormRef = ref('')
const tableHeader = reactive([
    {
        label: '项目名称', prop: 'name', type: 'btn', method: (row) => {
            handleDetail(row)
        }
    },
    {
        label: '报名费', prop: 'fee_type', showHtml: true, code: (row) => {
            if (row.fee_type == 1) {
                return '<span style="color:#67C23A ">有报名费</span>'
            } else {
                return '<span style="color:#F56C6C;">无报名费</span>'
            }
        }
    },
    { label: '项目主管', prop: 'manager_user' },
    { label: '项目成员', prop: 'project_user' },
    { label: '微信通知账户', prop: 'wx_user' },
])

const tableOptions = reactive(
    {
        label: '操作',
        width: '200px',
        value: 1,
        options: [
            {
                label: '删除',
                icon: 'Delete',
                method: (row) => {
                    handleDel(row)
                }
            },
        ]
    }
)

const handleDel = (row) => {
    ElMessageBox.confirm('确认要删除 ? 一旦删除无法恢复', '提示', { type: 'warning' }).then(async () => {
        let res = ''
        if (res) {
            ElMessage({ message: '删除成功', type: 'success' })

        }
    }).catch(() => {

    })
}

/**
 * 提交小单
 */
const handleSubmit = () => {
    schoolFormRef.value.validate(valid => {
        if (valid) {

        }
    })
}

/**
 * 关闭弹框
 */
const handleClose = () => {
    schoolFormRef.value.resetFields();
    schoolForm.id = ''
    visible.value = false
}

/**
 * 新增项目和编辑项目
 * @param row 
 */
const handleDetail = (row) => {
    if (row.id) {
        router.push({ path: '/school-management/edit-project' })
    } else {
        router.push({ path: '/school-management/add-project' })
    }

}

/**
 * 新增和编辑学校
 * @param type 
 */
const handleAddSchool = (type) => {
    if (type === 'edit') {
        schoolForm.xiaoming = ''
        schoolForm.id = ''
    }
    visible.value = true
}
</script>

<style scoped lang="less">
/deep/ .el-collapse-item__header {
    padding: 0 10px !important;
}

/deep/ .el-collapse-item__content {
    padding: 0 10px !important;
}
</style>